<template>
  <div style="margin-top: -30px;">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="top-action">
          精品类别
        </div>
        <ul class="select-container type-list">
          <li v-for="item in categoryList" :class="item.id == searchForm.upCategoryId ? 'active' : ''" :key="item.id" @click="categorySelectHandle(item)">
            {{item.largeName}}
          </li>
        </ul>
      </el-col>
      <el-col :span="18">
        <div class="top-action">
          <div>精品</div>
          <div>
            <el-input v-model="searchForm.name" placeholder="精品名称/精品编码"/>
            <el-button type="primary" @click="requestProductList">搜索</el-button>
          </div>
        </div>
        <div class="select-container">
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(item, index) in searchList" :key="item.id" :label="item.id" @change="checkboxChangeHandle(item, index, $event)">
              <el-row :gutter="10">
                <el-col :span="6">{{ item.name }}</el-col>
                <el-col :span="6">{{ item.orderNo }}</el-col>
                <el-col :span="6">{{ item.resource | dictFilter("用品属性")  }}</el-col>
                <el-col :span="6">{{ item.supplierName}}</el-col>
              </el-row>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-col>
    </el-row>
    <el-row class="top-action">
      <el-col :span="4">已选择精品</el-col>
      <el-col :span="20">
        <el-pagination
          style="text-align: right;"
          layout="total, sizes, prev, pager, next"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <!-- <div class="top-action">
      已选择精品
    </div> -->
    <data-table
      has-action
      :is-show-page="false"
      :value="selectTable"
      :table-column-attributes="tableColumns"
      :width="160">
      <template #action="{row, $index}">
        <i class="el-icon-delete" title="删除" style="cursor: pointer;" @click="deleteHandle(row, $index)"></i>
      </template>
    </data-table>
    <div class="text-right mt-10">
      <el-button type="success" @click="submitHandle">选择精品</el-button>
    </div>
  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import { upCategoryToBySupplier } from '@/api/pre-sale/qualityManagement/category'
import { jpOnline } from '@/api/pre-sale/qualityManagement/quality'

// 精品选择表单
export default {
  // 供应商
  props: ['supplierId'],
  components: { DataTable },
  data() {
    this.tableColumns = [
      { name: '精品名称', value: 'name', type: 'text' },
      { name: '精品编号', value: 'orderNo', type: 'text' },
      { name: '一级类别', value: 'appLargeOne', type: 'text' },
      { name: '二级类别', value: 'appLargeTwo', type: 'text' },
      { name: '供应商', value: 'supplierName', type: 'text' },
      { name: '资源类型', value: 'resource', type: 'dict', dict: '用品属性' }
    ]

    return {
      searchForm: {
        upCategoryId: '',
        name: ''
      },
      categoryList: [],
      searchList: [],
      checkList: [],
      selectTable: [],
      currentPage: 1,
      pageSize: 10,
      totalCount: 0,
      pageSizes: [10, 20, 50, 100]
    }
  },
  watch: {
    supplierId() {
      this.handleCurrentChange(1)
    }
  },
  methods: {
    categorySelectHandle(item) {
      this.searchForm.upCategoryId = item.id
      this.handleCurrentChange(1)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.requestProductList()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.requestProductList()
    },
    checkboxChangeHandle(product, $index, check) {
      if (check) {
        this.selectTable.push(product)
      } else {
        const index = this.selectTable.findIndex(item => product.id === item.id)
        this.selectTable.splice(index, 1)
      }
    },
    deleteHandle(row, $index) {
      const id = row.id
      const index = this.checkList.findIndex(item => item === id)
      if (index >= 0) {
        this.checkList.splice(index, 1)
      }
      this.selectTable.splice($index, 1)
    },
    submitHandle() {
      this.$emit('select', this.selectTable)
    },
    // 请求分类树形结构，解析二级分类
    requestCategoryList() {
      upCategoryToBySupplier(this.supplierId || '').then(res => {
        const listData = res.data || []
        listData.unshift({ id: '', largeName: '全部' })
        this.categoryList = listData
      })
    },
    // 查询精品
    requestProductList() {
      jpOnline({ ...this.searchForm }, this.pageSize, this.currentPage).then(res => {
        const { content = [], totalRecords = 0 } = res.data
        const checkList = []
        content.forEach(product => {
          const index = this.selectTable.findIndex(item => product.id === item.id)
          if (index > -1) {
            checkList.push(product.id)
          }
        })
        this.totalCount = totalRecords
        this.searchList = content
        this.checkList = checkList
      })
    }
  },
  mounted() {
    this.requestCategoryList()
    this.handleCurrentChange(1)
  }
}
</script>

<style lang="scss" scoped>
.top-action{
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /deep/ {
    .el-input {
      width: auto;
    }
  }
}


.select-container{
  height: 240px;
  margin-top: 4px;
  overflow: auto;
  border: 1px solid #dedede;
  
  /deep/ {
    .el-checkbox-group{
      padding: 5px 5px 0 5px;
    }

    .el-checkbox {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      margin-right: 0;
      padding: 5px;
      border: 1px solid #dedede; 
    }

    .el-checkbox__input{
      display: block;
      height: 14px;
    }

    .el-checkbox__label{
      flex: 1;
      display: flex;
      align-items: center;

      .el-row{
        width: 100%;
      }

      .el-col{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
.type-list{
  margin-bottom: 0;
  padding: 0 10px;
  list-style: none;
  border: 1px solid #dedede;

  li{
    height: 30px;
    line-height: 30px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid #dedede;
    cursor: pointer;

    &:hover,
    &.active{
      color: #409EFF;
    }
  }
}
</style>
